<template>
	<div>
		<div class="uw-bg-white uw-pt-10 uw-mb-10 uw-pl-12">
			<uw-form :data="formData" @submit="serachSubmit">
				<uw-form-item :data="formData"></uw-form-item>
			</uw-form>
		</div>
		<uw-table :tableConfig="tableConfig">
			<template #button="{data,row}">
				<el-button v-for="item in data" :type="item.type" @click="handleButton(item,row)">{{item.label}}</el-button>
			</template>
		</uw-table>
		<uw-order-details-modal :orderId="goodsId"></uw-order-details-modal>
	</div>
</template>

<script setup lang="ts">
	import { onMounted , ref } from 'vue';
	import { getOrderConfigApi , getOrderListApi } from '@/api/order';
	import uwOrderDetailsModal from './components/OrderDetailsModal.vue'
	const formInline = ref()
	const formData = ref()
	const tableConfig = ref()
	const showModel = ref(false)
	const goodsId = ref(0) // 是否是编辑
	const getOrderList = async () : Promise<void> => {
		const {data:{list}} = await getOrderListApi({
			page: 1,
			limit: 10,
			...formInline.value
		})
		tableConfig.value.data = list
	}
	const serachSubmit = (data:any) => {
		formInline.value = data
		getOrderList()
	}
	
	const handleButton = ({value},row:any) => {
		switch (value) {
			case 'edit':
				showModel.value = true
				goodsId.value = row.id
				break;
			case 'detail':
				goodsId.value = row.id
				break;
			case 'check':
				break;
			default:
				break;
		}
	}
	onMounted(() => {
		getOrderConfigApi().then((res)=>{
			formData.value = res.data.formData
			tableConfig.value = res.data.tableConfig
			getOrderList()
		})
	})
</script>

<style scoped>
	.demo-form-inline {
		background-color: #fff;
		margin-bottom: 10px;
		padding: 10px 10px 0 10px;
		border-radius: 4px;
	}
	.uiwu-table {
		margin-top: 10px;
	}
</style>